<template>
  <div class="min-h-screen bg-gradient-to-br from-indigo-500 to-purple-600">
    <!-- 顶部导航栏 -->
    <nav class="bg-white/10 backdrop-blur-md border-b border-white/20">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <!-- 侧边栏切换按钮 -->
            <button @click="sidebarOpen = !sidebarOpen" class="p-2 rounded-md text-white hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
            
            <!-- Logo -->
            <div class="flex-shrink-0 flex items-center ml-4">
              <div class="w-8 h-8 bg-white rounded-lg flex items-center justify-center">
                <i class="fas fa-brain text-indigo-600"></i>
              </div>
              <span class="ml-2 text-white text-xl font-bold">博沃智慧</span>
            </div>
          </div>
          
          <div class="flex items-center space-x-4">
            <!-- 通知 -->
            <button class="p-2 rounded-md text-white hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white">
              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
            </button>
            
            <!-- 用户菜单 -->
            <div class="relative">
              <button @click="userMenuOpen = !userMenuOpen" class="flex items-center space-x-2 p-2 rounded-md text-white hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white">
                <div class="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center">
                  <span class="text-white font-medium">{{ authStore.username?.charAt(0).toUpperCase() || 'U' }}</span>
                </div>
                <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                </svg>
              </button>
              
              <!-- 下拉菜单 -->
              <div v-if="userMenuOpen" @click.away="userMenuOpen = false" class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人资料</a>
                <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">设置</a>
                <a @click="handleLogout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer">退出登录</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>

    <div class="flex h-screen pt-16">
      <!-- 侧边栏 -->
      <div v-if="sidebarOpen" class="w-64 bg-white/10 backdrop-blur-md border-r border-white/20">
        <div class="p-4">
          <nav class="space-y-2">
            <a href="#" class="flex items-center space-x-2 px-4 py-2 text-white bg-white/20 rounded-md">
              <i class="fas fa-home"></i>
              <span>主页</span>
            </a>
            <a href="#" class="flex items-center space-x-2 px-4 py-2 text-white hover:bg-white/10 rounded-md">
              <i class="fas fa-comments"></i>
              <span>对话</span>
            </a>
            <a href="#" class="flex items-center space-x-2 px-4 py-2 text-white hover:bg-white/10 rounded-md">
              <i class="fas fa-book"></i>
              <span>知识库</span>
            </a>
            <a href="#" class="flex items-center space-x-2 px-4 py-2 text-white hover:bg-white/10 rounded-md">
              <i class="fas fa-cogs"></i>
              <span>MCP服务</span>
            </a>
            <a href="#" class="flex items-center space-x-2 px-4 py-2 text-white hover:bg-white/10 rounded-md">
              <i class="fas fa-cog"></i>
              <span>设置</span>
            </a>
          </nav>
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="flex-1 flex">
        <!-- 对话区域 -->
        <div class="flex-1 flex flex-col">
          <!-- 欢迎信息 -->
          <div class="flex-1 flex items-center justify-center p-8">
            <div class="text-center text-white">
              <div class="w-20 h-20 bg-white/20 rounded-full flex items-center justify-center mx-auto mb-6">
                <i class="fas fa-brain text-4xl"></i>
              </div>
              <h1 class="text-4xl font-bold mb-4">欢迎使用博沃智慧</h1>
              <p class="text-xl mb-8 text-white/80">智能问答系统</p>
              <p class="text-lg text-white/70 max-w-2xl mx-auto">
                您已成功登录，现在可以开始使用智能对话功能。请从左侧菜单选择相应的功能开始体验。
              </p>
              <div class="mt-8 flex justify-center space-x-4">
                <button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors">
                  开始对话
                </button>
                <button class="bg-white/20 text-white px-6 py-3 rounded-lg font-medium hover:bg-white/30 transition-colors">
                  查看知识库
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧统计面板 -->
        <div class="w-80 bg-white/10 backdrop-blur-md border-l border-white/20 p-6">
          <h3 class="text-white text-lg font-semibold mb-6">使用统计</h3>
          
          <div class="space-y-4">
            <div class="bg-white/10 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-white/80">今日对话</span>
                <span class="text-white font-medium">12</span>
              </div>
              <div class="w-full bg-white/20 rounded-full h-2">
                <div class="bg-white rounded-full h-2 w-3/4"></div>
              </div>
            </div>
            
            <div class="bg-white/10 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-white/80">知识库</span>
                <span class="text-white font-medium">3</span>
              </div>
              <div class="w-full bg-white/20 rounded-full h-2">
                <div class="bg-white rounded-full h-2 w-1/2"></div>
              </div>
            </div>
            
            <div class="bg-white/10 rounded-lg p-4">
              <div class="flex items-center justify-between mb-2">
                <span class="text-white/80">MCP服务</span>
                <span class="text-white font-medium">2</span>
              </div>
              <div class="w-full bg-white/20 rounded-full h-2">
                <div class="bg-white rounded-full h-2 w-1/3"></div>
              </div>
            </div>
          </div>
          
          <div class="mt-8">
            <h4 class="text-white font-medium mb-4">快速操作</h4>
            <div class="space-y-2">
              <button class="w-full bg-white/20 text-white py-2 px-4 rounded-lg hover:bg-white/30 transition-colors text-left">
                <i class="fas fa-plus mr-2"></i>新建对话
              </button>
              <button class="w-full bg-white/20 text-white py-2 px-4 rounded-lg hover:bg-white/30 transition-colors text-left">
                <i class="fas fa-upload mr-2"></i>上传文档
              </button>
              <button class="w-full bg-white/20 text-white py-2 px-4 rounded-lg hover:bg-white/30 transition-colors text-left">
                <i class="fas fa-plug mr-2"></i>配置MCP
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth'

const router = useRouter()
const authStore = useAuthStore()

const sidebarOpen = ref(true)
const userMenuOpen = ref(false)

// 退出登录
const handleLogout = () => {
  authStore.logout()
  router.push('/login')
}

// 点击外部关闭用户菜单
const closeUserMenu = () => {
  userMenuOpen.value = false
}

// 页面加载时重定向到首页
onMounted(() => {
  router.push('/')
})
</script>

<style scoped>
/* 点击外部关闭菜单的指令 */
[v-click-outside] {
  position: relative;
}

/* 自定义滚动条 */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>